<template>
  <div class="header-box">
    <el-button text :class="['general-btn-action', buttonIndex === 0 ? 'general-btn-action-active' : '']"
      style="margin-left: 0;" @click="jumpChildOne">算例评估</el-button>
    <el-button text :class="['general-btn-action', buttonIndex === 1 ? 'general-btn-action-active' : '']"
      @click="jumpChildTwo">策略种群</el-button>
    <el-button text :class="['general-btn-action', buttonIndex === 2 ? 'general-btn-action-active' : '']"
      @click="jumpChildThree">决策统计信息</el-button>
  </div>
  <hr class="line" />
  <div class="control-bottom">
    <router-view></router-view>
  </div>

</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, watch, onMounted, onBeforeMount } from "vue";
import { onBeforeRouteUpdate, useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const buttonIndex = ref(0)

onMounted(() => {
  router.push('/effect/optimaze-ctrl/optimaze-child1')
}
)

// 监听路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    // console.log('路由变化了，新的路径是：', newPath);
    // console.log('路由变化了，旧的路径是：', oldPath);
    if (newPath === '/effect/optimaze-ctrl') {
      router.push('/effect/optimaze-ctrl/optimaze-child1')
    }

  },
  { immediate: true } // 立即执行监听函数
);

function jumpChildOne() {
  buttonIndex.value = 0
  router.push('/effect/optimaze-ctrl/optimaze-child1')
}

function jumpChildTwo() {
  buttonIndex.value = 1
  router.push('/effect/optimaze-ctrl/optimaze-child2')
}

function jumpChildThree() {
  buttonIndex.value = 2
  router.push('/effect/optimaze-ctrl/optimaze-child3')
}


</script>

<style scoped lang="scss">
.header-box {
  display: flex;
  flex-shrink: 0;
  padding: computeVh(20)
}

.control-bottom {
  display: flex;
  flex-direction: column;
  height: computeVh(840);
  padding-top: computeVh(20);
  padding-bottom: computeVh(20);
  padding-left: computeVw(20);
  padding-right: computeVw(20);
  box-sizing: border-box;
  overflow: hidden;
}
</style>